/**
 * 统一 Chrome 与 Firefox 滑动条样式
 */
@mixin scrollbar() {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb--color) var(--scrollbar-track--color);
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  // 滑块
  &::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb--color);
  }
  // 轨道
  &::-webkit-scrollbar-track {
    background: var(--scrollbar-track--color);
  }
}

/**
 * 元素居中
 */
@mixin center() {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/**
 * 使用 translate 实现水平垂直居中
 * @param { String } $direction - `both`：水平垂直；`horizontal`：水平居中；`vertical`：垂直居中。
 * @param { Boolean } $fill - 是否进行填充。
 */
@mixin translate-center($direction: both, $fill: false) {
  position: absolute;
  @if $direction == horizontal {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    @if $fill {
      width: 100%;
    }
  } @else if $direction == vertical {
    top: 50%;
    transform: translate3d(0, -50%, 0);
    @if $fill {
      height: 100%;
    }
  } @else {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    @if $fill {
      width: 100%;
      height: 100%;
    }
  }
}
